<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh']">
            <template #refreshAppend>
                <el-input class="ml-3 w-40" v-model="filterParams.keyword" style="width: 240px" placeholder="请输入关键字"></el-input>
                <el-select class="ml-3 w-40" v-model="filterParams.register_channel" placeholder="请选择注册来源">
                    <el-option v-for="item in registerType" :key="item[1]" :label="item[0]" :value="item[1]" />
                </el-select>
                <el-date-picker v-model="filterParams.start_time" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" class="ml-2 w-52" />
                <span class="ml-2">~</span>
                <el-date-picker v-model="filterParams.end_time" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" class="ml-2 w-52" />
                <el-button class="ml-3" @click="handleSearch('reset')"
                    ><Icon name="fa fa-refresh" class="text-current text-sm mr-1"></Icon>重置</el-button
                >
                <el-button type="primary" @click="handleSearch('search')"
                    ><Icon name="fa fa-search" class="text-white text-sm mr-1"></Icon>查询</el-button
                >
            </template>
        </TableHeader>

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef">
            <template #status>
                <el-table-column prop="status" label="状态" :align="'left'" style="position: relative">
                    <template #default="scope">
                        <div class="flex">
                            <div>
                                <el-tag :type="scope.row.status === 1 ? 'primary' : 'danger'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
                            </div>
                            <div class="flex-none w-8 text-right">
                                <el-button type="primary" :icon="Edit" circle size="small" @click="changeStatus(scope.row)" />
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </template>
            <template #detail>
                <el-table-column label="账户明细">
                    <template #default="scope">
                        <div style="cursor: pointer; color: #4b9cfb"><span @click="(infoShow = true), (currentRow = scope.row)">明细</span></div>
                    </template>
                </el-table-column>
            </template>
        </Table>

        <!-- 表单 -->
        <!-- <PopupForm /> -->
        <PopupForm :modelValue="infoShow" @close="(value: any) => (infoShow = value)" :data="currentRow"></PopupForm>
        <el-dialog v-model="dialogVisible" title="修改用户状态" width="500" :before-close="handleClose">
            <div>
                设置用户状态
                <el-select v-model="selctValue">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit"> 确定 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'
import baTableClass from '/@/utils/baTable'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import { Edit } from '@element-plus/icons-vue'
import createAxios from '/@/utils/axios'

defineOptions({
    name: 'user/user',
})
let currentRow: any = ref({})
let infoShow: any = ref(false)
const { t } = useI18n()
const tableRef = ref()
// 修改用户状态
const dialogVisible = ref(false)
const selctValue = ref(1)
const member_id = ref()
const options = [
    {
        value: 0,
        label: '禁用',
    },
    {
        value: 1,
        label: '启用',
    },
]
// 打开弹窗
const changeStatus = (row: any) => {
    console.log('row', row)
    member_id.value = row.member_id
    dialogVisible.value = true
    selctValue.value = row.status
}
// 关闭弹窗
const handleClose = () => {
    dialogVisible.value = false
}
// 提交
const submit = () => {
    let form = {
        member_id: member_id.value,
        status: selctValue.value,
    }
    createAxios({ url: '/admin/member.Member/setStatus', method: 'post', data: form }).then((res) => {
        // console.log('res',res)
        if (res.code == 1) {
            dialogVisible.value = false
            baTable.getIndex()
        }
    })
}
// 搜索字段
let filterParams: any = ref({
    keyword: null, //关键字搜索
    register_channel: '', // 注册来源
    start_time: null, // 开始时间 
    end_time: null, // 结束时间
})
// 搜索
const handleSearch = (type: string) => {
    console.log('123',filterParams.value)
    if (type === 'reset') {
        filterParams.value = {
            keyword: null, // 0为未上架  1为上架中
            register_channel: null, //注册来源
            start_time: null, // 开始时间
            end_time: null, // 结束时间
        }
    }
    //赋值给baTable的filter对象
    filter.value!.keyword = filterParams.value.keyword
    filter.value!.register_channel = filterParams.value.register_channel
    filter.value!.start_time = filterParams.value.start_time
    filter.value!.end_time = filterParams.value.end_time
    baTable.getIndex()
}
// 获取表格数据
const baTable = new baTableClass(
    new baTableApi('/admin/member.Member/lists/'),
    {
        pk: 'id',
        filter: {},
        column: [
            // { type: 'selection', align: 'center', operator: false },
            { label: t('Id'), prop: 'member_id', align: 'center', operator: '=', operatorPlaceholder: t('Id'), width: 70 },
            { label: t('user.user.User name'), prop: 'nickname', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('user.user.nickname'), prop: 'nickname', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            { label: t('user.user.head portrait'), prop: 'headimg', align: 'center', render: 'image', operator: false, width: 100 },
            {
                label: t('user.user.Gender'),
                prop: 'sex',
                align: 'center',
                render: 'tag',
                custom: { '0': 'info', '1': '', '2': 'success' },
                replaceValue: { '0': t('Unknown'), '1': t('user.user.male'), '2': t('user.user.female') },
            },
            { label: '明细', prop: 'detail', slotName: 'detail', render: 'slot' },
            { label: t('user.user.mobile'), prop: 'mobile', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
            {
                label: t('user.user.Last login IP'),
                prop: 'login_ip',
                align: 'center',
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
                render: 'tag',
            },
            {
                label: t('user.user.Last login'),
                prop: 'last_login_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                width: 160,
            },
            { label: t('Create time'), prop: 'create_time', align: 'center', render: 'datetime', operator: 'RANGE', width: 160 },
            {
                label: t('State'),
                prop: 'status',
                slotName: 'status',
                render: 'slot',
            },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: {
            gender: 0,
            money: '0',
            score: '0',
            status: 'enable',
        },
    }
)
provide('baTable', baTable)
let filter = ref(baTable.table.filter)
baTable.mount()
baTable.getIndex()
// 获取注册来源列表
const registerType: any = ref({})
const getSinginType = async () => {
    await createAxios({ url: '/admin/member.Member/getChannelType', method: 'get' }).then((res) => {
        console.log('res', res)
        registerType.value = res.data
    })
}
getSinginType()

</script>

<style scoped lang="scss"></style>
